<template>
	<div class="dashboard-list">
		<a-spin :spinning="store.loading">
			<div class="dashboard-header">
				<div class="dashboard-actions">
					<a-input-search
						v-model:value="searchValue"
						allow-clear
						placeholder="搜索仪表盘"
						style="width: 250px"
						@search="handleSearch"
					/>
					<a-button class="add-button" type="primary" @click="handleAdd">
						<template #icon>
							<PlusOutlined />
						</template>
						添加仪表盘
					</a-button>
				</div>
			</div>

			<div v-if="!filteredDashboards.length" class="empty-state">
				<a-empty :description="searchValue ? '未找到匹配的仪表盘' : '暂无仪表盘'" />
				<a-button v-if="!searchValue" class="mt-4 add-empty-button" type="primary" @click="handleAdd">
					<template #icon>
						<PlusOutlined />
					</template>
					创建第一个仪表盘
				</a-button>
				<a-button v-else class="mt-4" type="default" @click="resetSearch">
					<template #icon>
						<ReloadOutlined />
					</template>
					重置搜索
				</a-button>
			</div>
			<div v-else class="dashboard-content">
				<a-radio-group v-model:value="viewMode" button-style="solid" class="mb-4 view-mode-selector">
					<a-radio-button value="card">
						<template #icon>
							<AppstoreOutlined />
						</template>
						卡片视图
					</a-radio-button>
					<a-radio-button value="list">
						<template #icon>
							<BarsOutlined />
						</template>
						列表视图
					</a-radio-button>
				</a-radio-group>

				<!-- 卡片视图 -->
				<div v-if="viewMode === 'card'" class="dashboard-grid">
					<a-row :gutter="[24, 24]">
						<a-col v-for="item in filteredDashboards" :key="item.id" :lg="6" :md="8" :sm="12" :xs="24">
							<a-card
								:body-style="{ padding: '20px' }"
								:class="{ 'dashboard-card-skeleton': item.loading }"
								class="dashboard-card"
								hoverable
							>
								<div class="card-top-icon">
									<DashboardOutlined style="font-size: 24px; color: #1890ff" />
								</div>
								<a-card-meta :title="item.name">
									<template #description>
										<div class="card-desc">{{ item.description || '暂无描述' }}</div>
										<div class="card-info">
											<a-tag color="blue">{{ formatDateToRelative(item.createTime) }}</a-tag>
										</div>
										<div class="card-footer">
											<a-tooltip title="设计仪表盘">
												<a-button class="action-button" shape="circle" type="primary" @click="handleDesign(item)">
													<template #icon>
														<EditOutlined />
													</template>
												</a-button>
											</a-tooltip>
											<a-tooltip title="编辑信息">
												<a-button class="action-button" shape="circle" type="default" @click="handleEdit(item)">
													<template #icon>
														<SettingOutlined />
													</template>
												</a-button>
											</a-tooltip>
											<a-tooltip title="删除仪表盘">
												<a-button class="action-button" danger shape="circle" @click="handleDelete(item)">
													<template #icon>
														<DeleteOutlined />
													</template>
												</a-button>
											</a-tooltip>
										</div>
									</template>
								</a-card-meta>
							</a-card>
						</a-col>
					</a-row>
				</div>

				<!-- 列表视图 -->
				<div v-else class="dashboard-list-view">
					<a-list
						:data-source="filteredDashboards"
						:pagination="filteredDashboards.length > 10 ? { pageSize: 10 } : false"
					>
						<template #renderItem="{ item }">
							<a-list-item>
								<a-list-item-meta :title="item.name">
									<template #avatar>
										<div class="list-icon">
											<DashboardOutlined style="font-size: 20px; color: #1890ff" />
										</div>
									</template>
									<template #description>
										<div class="list-desc">{{ item.description || '暂无描述' }}</div>
										<div class="list-info">创建时间：{{ item.createTime }}</div>
									</template>
								</a-list-item-meta>
								<template #actions>
									<a-button size="small" type="primary" @click="handleDesign(item)">
										<template #icon>
											<EditOutlined />
										</template>
										设计
									</a-button>
									<a-button size="small" type="default" @click="handleEdit(item)">
										<template #icon>
											<SettingOutlined />
										</template>
										编辑
									</a-button>
									<a-button danger size="small" @click="handleDelete(item)">
										<template #icon>
											<DeleteOutlined />
										</template>
										删除
									</a-button>
								</template>
							</a-list-item>
						</template>
					</a-list>
				</div>
			</div>
		</a-spin>
		<pageSet ref="childRef"></pageSet>
	</div>
</template>

<script setup>
	import { designStore } from '@/views/plugin/dashboard/store/design'
	import pageSet from '@/views/plugin/dashboard/view/design/component/pageSet/index.vue'
	import { Modal } from 'ant-design-vue'
	import { computed, onMounted, ref } from 'vue'
	import {
		AppstoreOutlined,
		BarsOutlined,
		DashboardOutlined,
		DeleteOutlined,
		EditOutlined,
		PlusOutlined,
		ReloadOutlined,
		SettingOutlined
	} from '@ant-design/icons-vue'

	const childRef = ref(null)
	const useDesignStore = designStore()
	const searchValue = ref('')
	const viewMode = ref('card')

	const isSelected = computed(() => {
		return !Object.keys(useDesignStore.selectedComponent)?.length
	})

	// 使用设计状态存储
	const store = designStore()

	// 过滤后的仪表盘列表
	const filteredDashboards = computed(() => {
		if (!searchValue.value) return store.dashboardList

		return store.dashboardList.filter(
			(item) =>
				item.name.toLowerCase().includes(searchValue.value.toLowerCase()) ||
				(item.description && item.description.toLowerCase().includes(searchValue.value.toLowerCase()))
		)
	})

	// 搜索处理
	const handleSearch = (value) => {
		searchValue.value = value
	}

	// 重置搜索
	const resetSearch = () => {
		searchValue.value = ''
	}

	// 格式化日期为相对时间
	const formatDateToRelative = (dateString) => {
		const date = new Date(dateString)
		const now = new Date()
		const diffMs = now - date
		const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))

		if (diffDays === 0) return '今天'
		if (diffDays === 1) return '昨天'
		if (diffDays < 7) return `${diffDays}天前`
		if (diffDays < 30) return `${Math.floor(diffDays / 7)}周前`
		if (diffDays < 365) return `${Math.floor(diffDays / 30)}个月前`
		return `${Math.floor(diffDays / 365)}年前`
	}

	// 页码改变
	const handlePageChange = (page, pageSize) => {
		store.setPagination({ current: page, pageSize })
		store.fetchDashboardList()
	}

	// 每页条数改变
	const handleSizeChange = (current, size) => {
		store.setPagination({ current: 1, pageSize: size })
		store.fetchDashboardList()
	}

	const handleDesign = (item) => {
		const designUrl = `${window.location.origin}/design?id=${item.id}`
		window.open(designUrl, '_blank')
	}

	// 添加仪表盘
	const handleAdd = () => {
		childRef.value.showDrawer()
	}

	// 编辑仪表盘
	const handleEdit = (item) => {
		// 编辑仪表盘信息
		childRef.value.showDrawer(item)
	}

	// 删除仪表盘
	const handleDelete = (item) => {
		// 二次确认
		Modal.confirm({
			title: '确认删除',
			content: '是否确认删除该仪表盘？删除后无法恢复！',
			okText: '确认',
			cancelText: '取消',
			okButtonProps: { danger: true },
			onOk: async () => {
				try {
					await store.deleteDashboard(item.id)
					// 刷新列表
					store.fetchDashboardList()
				} catch (error) {
					console.log(error)
				}
			}
		})
	}

	// 组件挂载时获取数据
	onMounted(() => {
		store.fetchDashboardList()
	})
</script>

<style lang="less" scoped>
	.dashboard-list {
		padding: 24px;
		background-color: #fff;
		height: calc(100vh - 130px);
		overflow-y: auto;

		.dashboard-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24px;
			padding-bottom: 16px;
			border-bottom: 1px solid #f0f0f0;

			.dashboard-title {
				h1 {
					font-size: 24px;
					font-weight: 600;
					margin-bottom: 4px;
					color: rgba(0, 0, 0, 0.85);
				}

				.dashboard-subtitle {
					font-size: 14px;
					color: rgba(0, 0, 0, 0.45);
					margin: 0;
				}
			}

			.dashboard-actions {
				display: flex;
				gap: 12px;

				.add-button {
					border-radius: 2px;
					height: 32px;
				}
			}
		}

		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 400px;

			.add-empty-button {
				padding: 0 24px;
				height: 40px;
				font-size: 16px;
				border-radius: 2px;
			}
		}

		.dashboard-content {
			.view-mode-selector {
				margin-bottom: 16px;
			}
		}

		.dashboard-grid {
			margin-bottom: 24px;
		}

		.dashboard-list-view {
			.list-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				border-radius: 2px;
				background-color: #f0f7ff;
			}

			.list-desc {
				color: rgba(0, 0, 0, 0.45);
				margin-bottom: 4px;
			}

			.list-info {
				color: rgba(0, 0, 0, 0.45);
				font-size: 12px;
			}
		}

		.dashboard-card {
			position: relative;
			transition: all 0.3s;
			border-radius: 2px;
			box-shadow:
				0 1px 2px -2px rgba(0, 0, 0, 0.05),
				0 3px 6px 0 rgba(0, 0, 0, 0.04),
				0 5px 12px 4px rgba(0, 0, 0, 0.02);

			//&:hover {
			//	transform: translateY(-4px);
			//	box-shadow:
			//		0 3px 6px -4px rgba(0, 0, 0, 0.12),
			//		0 6px 16px 0 rgba(0, 0, 0, 0.08),
			//		0 9px 28px 8px rgba(0, 0, 0, 0.05);
			//
			//	.card-footer {
			//		opacity: 1;
			//		transform: translateY(0);
			//	}
			//}

			.card-top-icon {
				position: absolute;
				top: 12px;
				right: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 36px;
				height: 36px;
				border-radius: 2px;
				background-color: #f0f7ff;
			}

			:deep(.ant-card-meta-title) {
				font-size: 16px;
				font-weight: 600;
				margin-bottom: 12px;
				color: rgba(0, 0, 0, 0.85);
				padding-right: 40px;
			}

			.card-desc {
				margin-bottom: 12px;
				color: rgba(0, 0, 0, 0.65);
				font-size: 14px;
				line-height: 1.5;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				min-height: 42px;
			}

			.card-info {
				margin-bottom: 16px;
			}

			.card-footer {
				display: flex;
				justify-content: end;
				gap: 8px;
				padding: 8px;
				//margin-top: 8px;
				border-top: 1px solid #f0f0f0;
				opacity: 0.8;
				transform: translateY(5px);
				transition: all 0.3s ease;

				.action-button {
					transition: all 0.2s;

					&:hover {
						transform: scale(1.1);
					}
				}
			}
		}

		.pagination-wrapper {
			display: flex;
			justify-content: flex-end;
			margin-top: 16px;
		}
	}

	// 响应式调整
	@media (max-width: 768px) {
		.dashboard-list {
			.dashboard-header {
				flex-direction: column;
				align-items: flex-start;
				gap: 16px;

				.dashboard-actions {
					width: 100%;
					flex-direction: column;
				}
			}

			.dashboard-card {
				margin-bottom: 16px;
			}
		}
	}
</style>
